<template>
  <div class="home-page">
    <div class="search">
      <van-search v-model="value" placeholder="请输入小区或地址">
        <template #label>
          <div @click="$router.push('/city')">
            上海<van-icon name="arrow-down"></van-icon>
          </div>
        </template>
        <template #right>
          <van-icon name="location-o" size="30" />
        </template>
      </van-search>
    </div>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <van-grid clickable :column-num="4" :border="false" icon-size="50px">
      <van-grid-item
        icon=""
        text="整租"
        to="/"
      />
      <van-grid-item
        icon=""
        text="合租"
        to="/"
      />
      <van-grid-item
        icon=""
        text="地图找房"
        to="/map"
      />
      <van-grid-item
        icon=""
        text="去出租"
        to="/sale"
      />
    </van-grid>
    <div class="group">
      <span>租房小组</span>
      <a href="#">更多</a>
      <van-grid direction="horizontal" :column-num="2" :gutter="10">
        <van-grid-item v-for="item in info" :key="item.id">
          <div class="home_img">
            <img :src="'http://liufusong.top:8080' + item.imgSrc" />
          </div>
          <div class="home_font">
            <p>{{ item.title }}</p>
            <p>{{ item.desc }}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getGroups } from '@/api/user'
export default {
  name: 'home-page',
  data () {
    return {
      value: '',
      info: {},
      images: [
        'http://liufusong.top:8080/img/swiper/1.png',
        'http://liufusong.top:8080/img/swiper/2.png',
        'http://liufusong.top:8080/img/swiper/3.png'
      ]
    }
  },
  // 轮播图请求
  // async created () {
  //   const data = await getHome()
  //   console.log(data)
  //   this.images = data.body
  //   // console.log(data.body)
  // }
  // 租房小组请求
  async created () {
    const data = await getGroups()
    // console.log(data)
    this.info = data.body
    // console.log(data.body)
  }
}
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}

.search {
  position: absolute;
  z-index: 999;
  height: 40px;
  left: 5%;
  top: 3%;
  width: 92%;
}
/deep/.van-search {
  background-color: rgba(0, 0, 0, -1.5);
}
.group {
  background-color: #f6f5f6;
  height: 200px;
  padding: 15px 10px;
}
.group span {
  font-weight: 600;
}
.group a {
  float: right;
  color: #787d82;
}
/deep/.van-grid {
  padding-top: 15px;
}
.home_img {
  width: 35%;
}
.home_font {
  font-size: 14px;
}
/deep/.van-grid-item {
  height: 80px;
  padding-right: -15px;
}
</style>
